<template>
  <div id="app">
    <div>
      <span>姓名:</span>
      <input type="text" v-model.trim="username" />
    </div>
    <div>
      <span>年龄:</span>
      <input type="number" v-model.trim="userage" />
    </div>
    <div>
      <span>性别:</span>
      <select v-model="usergender">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
    </div>
    <div>
      <!-- 这里的id是变量id -->
      <button @click.prevent="add(id)">添加/修改</button>
    </div>
    <div>
      <table
        border="1"
        cellpadding="10"
        cellspacing="0"
      >
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item,index) in arr" :key="item.id">
          <td>{{index+1}}</td>
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>{{item.gender}}</td>
          <td>
            <button @click.prevent="rem(item.id)">删除</button>
            <button @click="write(item.id)">编辑</button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
// 思路：

// 需求1：点击添加/修改
// 1.给添加绑定事件，阻止事件默认行为
// 2.给input绑定v-model,获取数据，同时去空
// 3.事件处理函数(传id)，进行非空判断。
// 3.1为空。return弹出警示框
// 3.2.不为空，遍历数组，判断当前项id是否和传入的相同，
// 相同，就将当前项的数据给表单
// 不相同，以对象的形式添加到数组上
// 清空表单

// 需求2：点击编辑
// 1.按钮绑定点击事件
// 2.传id参数
// 3.循环数组，判断当前项的id值是否和传入的id值相同
// 4.将当前项的数据赋值给表单
// 5.当前项的id 要赋值给 id变量



// 需求3：点击删除
// 给删除按钮绑定点击事件，阻止默认行为
// 传id参数
// 循环数组，判断当前项的id值是否和传入的id值相同
// 相同就删除当前项
// 清空表单



export default {
  data() {
    return{
      username:'',
      userage:'',
      usergender:'男',
      id:'',
      arr:[
      {
        id:1,
        name:'Tom',
        age:19,
        gender:'男'
      },
      {
        id:2,
        name:'Mary',
        age:19,
        gender:'男'
      },
      {
        id:3,
        name:'laylay',
        age:19,
        gender:'男'
      }
    ]
    }
  },
  methods:{
    add(i) {
      if(this.username === '' || this.userage === '') {
        return alert('输入不能为空')
      }
      // 遍历数组
      this.arr.forEach((item,index)=>{
        // 如果id值相同，说明是修改的内容。
        if(item.id === i) {
          item.name = this.username
          item.age = this.userage
          item.gender = this.usergender
        }
      })
       // 如果没有，就说明是新增的
      if(this.id == '') {
        // 给数组新增数据
             this.arr.push(
        {
        id:this.arr.length>0?this.arr[this.arr.length-1].id+1:1,
        name:this.username,
        age:this.userage,
        gender:this.usergender
      }
      )
      }
      // 将所有的数据都清空
      this.username = ''
      this.userage=''
      this.id=''
    },
    rem(id) {
      // 点击删除，循环数据
      this.arr.forEach((item,index)=>{
        if(item.id == id) {
          this.arr.splice(index,1)
        }
      })
      // 防止先点编辑，没有点修改提交，所以点删除之后顺便清空一下数据
      this.username=''
      this.userage=''
    },
    write(id) {
      // 点击编辑按钮，就将当前的数据都给表单
      this.arr.forEach((item,index)=>{
        if(item.id == id) {
          this.username=item.name
          this.userage=item.age
          this.usergender = item.gender
          this.id=item.id
        }
      })
    }
    
  }
}
</script>